<template>
  <div class="protocol-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>方案信息</span>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </div>
      </template>
      
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="方案编号" prop="protocolNumber">
          <el-input v-model="formData.protocolNumber" placeholder="请输入方案编号" />
        </el-form-item>
        
        <el-form-item label="方案名称" prop="protocolName">
          <el-input v-model="formData.protocolName" placeholder="请输入方案名称" />
        </el-form-item>
        
        <el-form-item label="版本号" prop="version">
          <el-input v-model="formData.version" placeholder="请输入版本号" />
        </el-form-item>
        
        <el-form-item label="申办方" prop="sponsor">
          <el-input v-model="formData.sponsor" placeholder="请输入申办方" />
        </el-form-item>
        
        <el-form-item label="研究类型" prop="studyType">
          <el-select v-model="formData.studyType" placeholder="请选择研究类型" style="width: 100%">
            <el-option label="临床试验" value="clinical" />
            <el-option label="观察性研究" value="observational" />
            <el-option label="真实世界研究" value="realWorld" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="研究阶段" prop="phase">
          <el-select v-model="formData.phase" placeholder="请选择研究阶段" style="width: 100%">
            <el-option label="I期" value="phase1" />
            <el-option label="II期" value="phase2" />
            <el-option label="III期" value="phase3" />
            <el-option label="IV期" value="phase4" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="研究目的" prop="objective">
          <el-input
            v-model="formData.objective"
            type="textarea"
            :rows="3"
            placeholder="请输入研究目的"
          />
        </el-form-item>
        
        <el-form-item label="入排标准" prop="criteria">
          <el-input
            v-model="formData.criteria"
            type="textarea"
            :rows="5"
            placeholder="请输入入排标准"
          />
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const formRef = ref(null)
const formData = reactive({
  protocolNumber: '',
  protocolName: '',
  version: '',
  sponsor: '',
  studyType: '',
  phase: '',
  objective: '',
  criteria: ''
})

const rules = {
  protocolNumber: [
    { required: true, message: '请输入方案编号', trigger: 'blur' }
  ],
  protocolName: [
    { required: true, message: '请输入方案名称', trigger: 'blur' }
  ],
  version: [
    { required: true, message: '请输入版本号', trigger: 'blur' }
  ],
  sponsor: [
    { required: true, message: '请输入申办方', trigger: 'blur' }
  ],
  studyType: [
    { required: true, message: '请选择研究类型', trigger: 'change' }
  ],
  phase: [
    { required: true, message: '请选择研究阶段', trigger: 'change' }
  ]
}

const handleSave = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    // 这里添加保存逻辑
    ElMessage.success('保存成功')
  } catch (error) {
    console.error('Validation error:', error)
  }
}
</script>

<style lang="scss" scoped>
.protocol-container {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style> 